<template>
	<view class="container">

		<u-navbar bgColor="#0e3a5e" title="缺料记录" :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" leftIconColor="#fff"
			:titleStyle="data.titleStyle">
			<template #right>
				<view class="u-nav-slot">
					<u-icon name="plus-circle-fill" size="19" color="#fff" @click="openModal('add')"></u-icon>
				</view>
			</template>
		</u-navbar>

		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="pdBox" v-if="data.list.length">
				<view class="special_shake" v-for="(item,index) in data.list" :key="item.id">
					<view class="special_shake_item_top">
						<u-icon name="trash" @click="delData(item, index)"></u-icon>
					</view>
					<view class="special_shake_item" @click="goItem(item.id)">
						<text class="special_shake_item_l">记录人</text>
						<text class="special_shake_item_r">{{item.recordByName}}</text>
					</view>
					<view class="special_shake_item" @click="goItem(item.id)">
						<text class="special_shake_item_l">记录日期</text>
						<text class="special_shake_item_r">{{formatDate(item.recordTime)}}</text>
					</view>
					<view class="special_shake_item borderNone" @click="goItem(item.id)">
						<text class="special_shake_item_l">备注</text>
						<text class="special_shake_item_r">{{item.memo}}</text>
					</view>
				</view>
			</view>
		</mescroll-body>

		<u-modal :show="data.modalShow" :title="data.modalType === 'add'? '新增缺料批次': '修改缺料批次'" :showCancelButton="true"
			@confirm="submitForm" @cancel="data.modalShow = false">
			<view class="slot-content">
				<u--form labelPosition="left" :model="data.form" ref="form1" label-width="80">
					<u-form-item label="记录人" prop="sex" borderBottom @click="data.userPickerShow = true;">
						<u--input v-model="data.form.recordByName" disabled disabledColor="#ffffff" placeholder="请选择记录人"
							border="none"></u--input>
						<template #right>
							<u-icon name="arrow-right"></u-icon>
						</template>
					</u-form-item>
					<u-form-item label="记录日期" prop="recordDate" borderBottom @click="data.dateShow = true;">
						<u--input v-model="data.form.recordDate" disabled disabledColor="#ffffff" placeholder="请选择记录日期"
							border="none"></u--input>
						<template #right>
							<u-icon name="arrow-right"></u-icon>
						</template>
					</u-form-item>
					<u-form-item label="备注" prop="memo" borderBottom>
						<u--input v-model="data.form.memo" placeholder="请输入备注" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
		<u-picker :show="data.userPickerShow" keyName="nickName" :columns="data.userPickerColumns"
			@cancel="data.userPickerShow = false" @confirm="chooseUser"></u-picker>
		<u-datetime-picker :show="data.dateShow" v-model="data.form.time" mode="date" @cancel="data.dateShow = false"
			@confirm="chooseDate"></u-datetime-picker>
	</view>
</template>

<script lang="ts" setup>
	import {
		getMatershortageList,
		saveMatershortage,
		matershortagedelete,
		getRoleUserList
	} from '@/api/planList/planList.js'
	import {
		reactive,
	} from "vue";
	import {
		onShow,
		onLoad,
		onReachBottom,
		onPageScroll
	} from "@dcloudio/uni-app";
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import dayjs from 'dayjs';
	const upOption = {
		noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
		textNoMore: '-- 没有更多啦 --', // 没有更多数据的提示文本
		empty: {
			tip: '~ 暂无数据 ~' // 提示
		}
	}
	
	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
	
	const data = reactive({
		list: [],
		listQuery: {
			planEqmId: null,
		},
		titleStyle: {
			color: '#fff',
			fontSize: '34rpx',
			fontWeight: '600'
		},
		modalShow: false,
		modalType: 'add',
		form: {
			recordBy: '',
			time:Date.now()
		},
		userPickerShow: false,
		dateShow: false,
		userPickerColumns: [],
		userInfo:{}
	})
	onLoad((option) => {
		if(option.planEqmId){
			data.listQuery.planEqmId = option.planEqmId
		}
	
		data.userInfo = uni.getStorageSync('userInfo')
	
		getRoleUserList({roleNames:'生产'}).then(res => {
			data.userPickerColumns = [res.rows]
		})
	})
	onShow(() => {
	
	})
	const upCallback = async (mescroll) => {
		try{
			const params = {
				current: mescroll.num,
				size: mescroll.size,
				planEqmId: data.listQuery.planEqmId,
			}
			const res = await getMatershortageList(params)
			const curPageData = res.data.records || [] // 当前页数据
			if (mescroll.num == 1) data.list = []; // 第一页需手动制空列表
			data.list = data.list.concat(curPageData)
			mescroll.endByPage(curPageData.length, res.data.total);
		}catch(e){
			//TODO handle the exception
		}
	}

	const delData = async (item,index) => {
		uni.showModal({
			title: '提示',
			content: '确认删除吗？',
			success:async function (sres) {
				if (sres.confirm) {
					uni.showToast({
						title: '删除成功',
						icon:'none'
					})
					const res = await matershortagedelete(item.id)
					getMescroll().resetUpScroll() 
					
				} 
			}
		});
	}
	const openModal = (type, row) => {
		if (type === 'add') {
			data.form = {
			recordBy: data.userInfo.userId,
			recordByName: data.userInfo.nickName,
			recordDate: dayjs().format('YYYY-MM-DD'),
			recordTime: dayjs().unix()
		}
			data.modalShow = true
		}
	}
	const chooseUser = (e) => {
		data.form.recordBy = e.value[0].userId
		data.form.recordByName = e.value[0].nickName
		data.userPickerShow = false
	}
	const chooseDate = (e) => {
		data.form.recordDate = dayjs(e.value).format('YYYY-MM-DD')
		data.form.recordTime = e.value / 1000
		data.dateShow = false
	}
	const submitForm = () => {
		data.form.planEqmId = data.listQuery.planEqmId
		saveMatershortage(data.form).then(res => {
			if (res.status === 200) {
				uni.showToast({
					title: '操作成功',
					icon:'none'
				})
				data.modalShow = false
				getMescroll().resetUpScroll() 
			}
		})
	}
	const formatDate = (val) => {
		return dayjs(val * 1000).format('YYYY-MM-DD');
	}
	const goItem = (id) => {
		uni.navigateTo({
			url: `/pages/masterShortItem/masterShortItem?planEqmId=${data.listQuery.planEqmId}&recordId=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.special_shake {
		background: #fff;
		margin-bottom: 40rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx 0 #bbbbbb;
		.special_shake_item_top {
			display: flex;
			justify-content: flex-end;
		}
	
		.special_shake_item {
			border-bottom: 1px solid #eeeeee;
			padding: 20rpx 0;
			font-size: 16px;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
	
			.special_shake_item_l {
				width: 30%;
			}
	
			.special_shake_item_r {
				flex: 1;
				color: #3975c6;
	
			}
	
			.attr {
				display: flex;
				justify-content: space-between;
	
				.u-button {
					width: 30px !important;
				}
			}
		}
	}
</style>